<template>
  <view class="goods_item">
    <!-- 左边图片 -->
    <view class="goods_item_left">
      <!-- 单选框 -->
        <radio :checked ="goods.goods_state" color="#C00000" v-if='showRadio' @click='radioClickHandler'/>
      <view class="goods_img">
        <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
      </view>
    </view>

    <!-- 右边商品信息 -->
    <view class="goods_item_right">
      <view class="goods_name"> {{ goods.goods_name }}</view>
      <view class="goods_info">
        <view class="goods_price">￥{{ goods.goods_price | toFixed}} </view>
        <!-- uni-app提供的带加减按钮的数字输入框 -->
        <uni-number-box :min="1" :max="999" :value="goods.goods_count" v-if='showNum' @change="numberChangeHandler"></uni-number-box>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：
        defaultPic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.72qq.com%2Ffile%2F201512%2F12%2Fee3edd2bf3.jpg&refer=http%3A%2F%2Fimg.72qq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661580556&t=c47dbda92813ed6a3d4a22ebde844a71'
      }
    },
    // 过滤器处理价格文本格式
    filters: {
      toFixed(num) {
        // 把数字处理为带两位小数点的数字
        return Number(num).toFixed(2)
      }
    },
    props: {
      // 商品的信息对象
      goods: {
        type: Object,
        default: {}
      },
      // 是否需要展示单选框
     showRadio: {
       type:Boolean,
       default: false
     },
     // 是否需要展示数字输入框
     showNum: {
       type: Boolean,
       defalut: false
     },
    },
    methods: {
      radioClickHandler() {
        this.$emit('radio-change', { goods_id: this.goods.goods_id, goods_state: !this.goods.goods_state })
      },
      numberChangeHandler(e) {
        this.$emit('num-change', {
          goods_id: this.goods.goods_id,
          goods_count: e
        })
      },
    },
  }
</script>

<style lang="scss">
  .goods_item {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 10px 10px 5px;


 .goods_item_left {
   display: flex;
   align-items: center;
   justify-content: space-between;
   .goods-pic {
     width: 100px;
     height: 100px;
     display: block;
   }
 }


    .goods_item_right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 5px;

      .goods_name {
        font-size: 13px;
      }
     .goods_info {
       display: flex;
       justify-content: space-between;
       align-items: center;
       .goods_price {
         color: #C00000;
         font-size: 16px;
       }
     }

    }

  }
</style>
